<template>
  <div>

    <el-table :data="listData.data" style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand" :rules="rules" ref="shenhe">
            <el-form-item label="封面">
              <img width="60px" :src="props.row.imgs" alt="">
            </el-form-item>
            <el-form-item label="名称">
              <span>{{ props.row.name }}</span>
            </el-form-item>
            <el-form-item label="推荐用户">
              <span>{{ props.row.user }}</span>
            </el-form-item>
            <el-form-item label="演员">
              <span>{{ props.row.actor }}</span>
            </el-form-item>
            <el-form-item label="导演">
              <span>{{ props.row.director }}</span>
            </el-form-item>
            <el-form-item label="类型">
              <span>{{ props.row.type }}</span>
            </el-form-item>
            <el-form-item label="评分">
              <span>{{ props.row.score }}</span>
            </el-form-item>
            <el-form-item label="上映时间">
              <span>{{ props.row.showingon }}</span>
            </el-form-item>
            <el-form-item label="上映地区">
              <span>{{ props.row.country }}</span>
            </el-form-item>
            <el-form-item label="简介">
              <span>{{ props.row.cont }}</span>
            </el-form-item>
            <el-form-item label="推荐理由">
              <span>{{ props.row.tj_cont }}</span>
            </el-form-item>
            <el-form-item label="审核">
              <el-select v-model="shenhe.status" placeholder="审核状态" size="mini" @blur="btnTab(props.row.id)">
                <el-option label="待审" value="0"></el-option>
                <el-option label="通过" value="1"></el-option>
                <el-option label="不通过" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="理由" v-show="shenhe.status == 2">
              <el-input v-model="shenhe.liyou" placeholder="审核不通过理由" style="width: 300px;"></el-input>
            </el-form-item>

          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="名称" prop="name">
      </el-table-column>
      <el-table-column label="推荐用户" prop="user">
      </el-table-column>
      <el-table-column label="类型" prop="type">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="props">
          <el-button @click="btn">提交</el-button>
          <el-button @click="del(props.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination style="margin-top: 20px;" background layout="->, total, prev, pager, next, jumper"
      :total="listData.total" :page-size="listData.pagesize" :current-page="listData.currebt_page"
      @current-change="changeCurrentPage($event)">
    </el-pagination>
  </div>
</template>

<script>
import httpApi from '@/http';


export default {
  data () {
    return {
      listData: {
        pagesize: 3
      },
      shenhe: {
        status: '0',
        liyou: '无',
      },
      shenheRes: {},
      rules: {
        status: [{ required: true, message: '请选择是否审核通过', trigger: 'change' }]
      }
    }
  },

  methods: {
    // 点击表格
    btnTab (id) {
      httpApi.shenheApi.queryById({ id }).then(res => {
        console.log('点击表格', res.data);
        this.shenheRes = res.data
      })
    },
    // 提交
    btn () {
      let statusNum = parseInt(this.shenhe.status)
      let params = { id: this.shenheRes.data[0].id, status: statusNum, liyou: this.shenhe.liyou, type: this.shenheRes.data[0].type }
      console.log(params);
      this.$confirm('是否提交?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 发送http请求,
        httpApi.shenheApi.shenhe(params).then(res => {
          console.log('提交', res);
        })
        this.shenheList(1);
      })
    },
    // 加载审核列表
    shenheList (currebt_page) {
      httpApi.shenheApi.queryAllshenhe({ page: currebt_page, pagesize: 10 }).then(res => {
        console.log('审核列表数据', res)
        this.listData = res.data
        this.listData.current_page = parseInt(this.listData.current_page)
        // console.log(this.listData);
      })
    },
    /** 分页器当前页码改变时执行 */
    changeCurrentPage (currebt_page) {
      console.log(currebt_page)
      this.shenheList(currebt_page)
    },
    // 删除
    del (id) {
      console.log('删除id', id);
      this.$confirm('将删除该审核记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 发送http请求, 执行删除业务
        httpApi.shenheApi.del({ id }).then(res => {
          console.log('删除业务结果', res)
          if (this.listData.data.length == 1 &&
            this.listData.current_page > 1) {
            this.changeCurrentPage(this.listData.current_page - 1)
          } else {
            this.changeCurrentPage(this.listData.current_page)
          }
        })
      })
    }
  },
  mounted () {
    this.shenheList(1);
  },
}
</script>

<style>
.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>